import React from 'react'
import './index.scss'

import classNames from 'classnames'

import { Image } from '@tarojs/components'

interface ICImage {
  src: string | 'cart'
  size?: number
  width?: number
  height?: number
  circle?: boolean
  borderRadius?: number
  marginRight?: number
  mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix'
  onClick?: () => void
  isStop?: boolean
  [key: string]: any
}

/**
 * 图片 组件  支持 JPG、PNG、SVG、WEBP、GIF 等格式以及云文件ID。
 * @param src 图片地址
 * @param size 图片宽度与高度相同  默认 0
 * @param width 图片宽度 默认 0
 * @param height 图片高度 默认 0
 * @param borderRadius 圆角大小 默认 0
 * @param marginRight 图片右侧 marginRight 默认0
 * @param mode 图片图片裁剪、缩放的模式  默认 scaleToFile
 * @param circle 是否为圆形  默认 false
 */
export default function CImage(params: ICImage) {
  const {
    src,
    size = 0,
    width = 0,
    height = 0,
    marginRight = 0,
    borderRadius = 0,
    mode = 'scaleToFill',
    circle = false,
    onClick = () => {},
  } = params

  return (
    <Image
      src={src || ''}
      style={{ lineHeight: 0 }}
      className={classNames([
        'c_image',
        size && `c_image-size-${size}`,
        width && `c_image-width-${width}`,
        height && `c_image-height-${height}`,
        marginRight && `c_image-marginRight-${marginRight}`,
        borderRadius && `c_image-borderRadius-${borderRadius}`,
        circle && 'c_image-circle',
      ])}
      onClick={onClick}
      lazyLoad
      mode={mode}
    />
  )
}
